extends ./panel.pug

block title
  | #[span.icon-zoom-in] #{title}

block content
  .input-group
    input.h-zoom-slider.form-control(
      type="range", min=min, max=max, step=step, value=value, disabled=disabled)
    span.h-zoom-value.input-group-addon #{value}
    span.h-zoom-range-controls
      button#h-zoom-range-increase.btn.btn-sm.btn-default.disabled(title="Increase maximum zoom")
        i.icon-plus
      br
      button#h-zoom-range-decrease.btn.btn-sm.btn-default.disabled(title="Decrease maximum zoom")
        i.icon-minus
  .btn-group.btn-group-justified.h-zoom-buttons
    each val in buttons
      if val
        - var text = val;
      else
        - var text = 'Fit';
        - val = minMag;
      .btn-group
        button.btn.btn-default.h-zoom-button(type="button", data-value=val, class={'btn-sm': val > maxNaturalMag}) #{text}
  .h-download-button-container
    a#download-view-link.h-download-link
      button.btn-default.btn-sm.h-download-button.h-download-button-view(type="button", data-toggle="tooltip", title="Download current view")
        | #{title_download_view}

    button.btn-default.btn-sm.h-download-button.h-download-button-area(type="button", data-toggle="tooltip", title="Draw the region of interest")
      | #{title_download_area}
